<template>
  <div class="onlines" :class="{'onlines--special':ops_tye}">
    <div class="title">
      <i class="iconfont icon-device"></i>
      <span>在线设备</span>
      <div class="ops" v-if="running">
        <div class="ops-group" v-if="ops && ops.indexOf('config') !=-1">
          <a @click.stop="settingDialog.visible = true"><i class="iconfont icon-config"></i>配置</a>
        </div>
        <div class="ops-group" v-if="ops && ops.indexOf('gather') !=-1">
          <a @click.stop="doStartGather"><i class="iconfont icon-start"></i>开始采集</a>
          <a @click.stop="doStopGather"><i class="iconfont icon-stop"></i>停止采集</a>
        </div>
        <div class="ops-group" v-if="ops && ops.indexOf('upload') !=-1">
          <a @click.stop="doStartUpload"><i class="iconfont icon-start"></i>开始上传</a>
          <a @click.stop="doStopUpload"><i class="iconfont icon-stop"></i>停止上传</a>
        </div>
        <div class="ops-group" v-if="ops && ops.indexOf('flush') !=-1">
          <a @click.stop="doFlush"><i class="iconfont icon-flush"></i>擦除</a>
        </div>
        <div class="ops-group" v-if="ops && ops.indexOf('flush') !=-1">
          <a @click.stop="doReboot"><i class="iconfont icon-chongqi"></i>重启</a>
        </div>
        <div class="ops-group" v-if="ops && ops.indexOf('flush') !=-1">
          <a @click.stop="doClose"><i class="iconfont icon-chongqi"></i>关闭</a>
        </div>
      </div>
      <div class="ops" v-else>
        <div class="ops-group">
          <a @click.stop="doRefresh"><i class="iconfont icon-shuaxin"></i>刷新</a>
        </div>
      </div>
    </div>
    <div class="items-title">在线设备</div>
    <div class="items">
      <div class="device" v-for="device in onlines" :key="device.id" :class="device_status(device)">
        <div class="-inner">
          <div class="info">
            <div class="-icon"><i class="iconfont icon-device"></i></div>
            <div class="-name">
              <div class="-name-n">{{device.name ||'识别中...'}}</div>
              <div class="-name-sets">
                <span v-if="device.cjms">采集模式:{{device.cjms=='03'?'Acc+Gyr':(device.cjms=='02'?'Gyr':'Acc')}}</span>
                <span v-if="device.cjpl">采集频率:{{device.cjpl}}</span>
                <span v-if="device.lastFlushTime">最后檫除时间:{{device.lastFlushTime}}</span>
              </div>
            </div>
          </div>
          <div class="status">
            <div class="-s -s-1">
              <i class="iconfont icon-status"></i>
              <span>连接</span>
            </div>
            <div class="-s -s-2">
              <i class="iconfont icon-status"></i>
              <span>采集</span>
            </div>
            <div class="-s -s-3">
              <i class="iconfont icon-status"></i>
              <span>上传</span>
            </div>
          </div>
        </div>
      </div>
      <div class="none" v-if="onlines.length == 0">没有识别到设备！</div>
    </div>
    <uploading v-if="uploads.length>0" :uploads="uploads"></uploading>
    <setting :visible.sync="settingDialog.visible"></setting>
  </div>
</template>

<script>
  import Gyro from '@/api/gyro';
  import Queue from '@/ui/common/mixins/queue';
  import Options from './options';
  import Uploading from "./uploading";
  import Setting from "./setting";

  export default {
	name: "onlines",
	components: {Setting, Uploading},
	mixins: [Queue, Options],
	data() {
	  return {
		running: true,
		onlines: [],
		timer: null,
		settingDialog: {
		  visible: false,
		}
	  }
	},
	props: {
	  ops: {
		type: String,
		default: 'refresh, config, gather, upload, flush, reboot'
	  }
	},
	computed: {
	  ops_tye: function () {
		if (this.ops == 'refresh, config, gather, upload, flush, reboot') {
		  return false;
		}
		return true;
	  },
	  uploads: function () {
		var uploads = [];
		this.onlines.forEach(device => {
		  if (device.uploads && device.uploads.length > 0) {
			uploads.push(device);
		  }
		})
		return uploads;
	  }
	},
	mounted() {
	  this.load();
	},
	methods: {
	  load: function () {
		this.__task_add(() => this.load_task());
	  },
	  delay_load_task: function () {
		if (this.timer == null) {
		  this.timer = setTimeout(() => {
			this.__task_add(() => this.load_task())
		  }, 1000);
		}
	  },
	  load_task: function () {
		return new Promise((resolve, reject) => {
		  Gyro.onlines().then(res => {
			this.setResult(res.obj);
			resolve();
		  }, () => {
			this.setResult();
			resolve();
		  }).catch(() => {
			this.setResult();
			resolve();
		  });
		});
	  },
	  setResult: function (obj) {
		this.running = obj ? obj.running : false;
		this.onlines = obj ? obj.onlines : this.onlines;
		this.timer = null;
		this.delay_load_task();
	  },
	  device_status: function (device) {
		if (device.status == '在线') {
		  return 'device-status-1'
		}
		if (device.status == '采集中') {
		  return 'device-status-2'
		}
		if (device.status == '上传中') {
		  return 'device-status-3'
		}
	  }
	},
	destroyed() {
	  if (this.timer != null) {
		clearTimeout(this.timer);
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .onlines {
    .title {
      display flex;

      i {
        margin-right 15px;
        color $color-success;
      }

      span {
        flex 1;
      }

      .ops {
        display flex;
        font-size 12px;

        a {
          display inline-block;
          border 1px solid $color-border;
          padding 0px 8px;
          margin-left 5px;
          background-color $color-white;
          box-shadow 1px 2px 5px $color-border;
          border-radius 3px;
          cursor pointer;
          transition: all 0.1s ease-out;

          &:hover {
            position relative;
            transform: scale(1.1);
            color $color-success;
          }

          i {
            display none;
          }
        }
      }
    }

    .items-title {
      height 60px;
      line-height 60px;
      font-size 24px;
      color $color-light-grey;
      display none;
    }

    .items {
      background-color $color-white;
      min-height 300px;
      padding 10px;

      .device {
        float left;
        width 50%;

        .-inner {
          border 1px solid $color-border;
          border-radius 4px;
          padding 10px;
          margin-right 5px;
          margin-bottom 5px;
        }

        .info {
          display flex;
          margin-bottom 10px;

          .-icon {
            margin-right 5px;
            margin-left 5px;
            font-size 25px;
            display: flex;
            align-items: center;
            padding 0 10px;
          }

          .-name {
            .-name-n {
              margin-bottom 8px;
            }

            .-name-sets {
              font-size 12px;
              color $color-light-grey;

              span {
                margin-right 3px;
              }
            }
          }
        }

        .status {
          display flex;
          font-size 12px;
          padding-left 52px;

          .-s {
            display flex;
            margin-right 5px;
            color $color-light-grey;
            line-height 17px;

            i {
              display flex;
              align-items center;
              font-size 17px;
            }
          }
        }
      }

      .device-status-1 {
        .-inner {
          border 1px solid $color-success;
        }

        .icon-device {
          color $color-success;
        }

        .status {
          .-s-1 {
            color $color-success;
          }
        }
      }

      .device-status-2 {
        .-inner {
          border 1px solid $color-success;
        }

        .icon-device {
          color $color-success;
        }

        .status {
          .-s-1 {
            color $color-success;
          }

          .-s-2 {
            color $color-danger;

            i {
              animation: rotatefresh 1s infinite ease;
            }
          }
        }
      }

      .device-status-3 {
        .-inner {
          border 1px solid $color-success;
        }

        .icon-device {
          color $color-success;
        }

        .status {
          .-s-1 {
            color $color-success;
          }

          .-s-3 {
            color $color-danger;

            i {
              animation: rotatefresh 1s infinite ease;
            }
          }
        }
      }

      &:after {
        content "";
        clear both;
        display block;
      }
    }

    .none {
      font-size 16px;
      color $color-light-grey;
      text-align center;
      padding-top 80px;
    }
  }

  .onlines--special {
    .title {
      i, span {
        display none;
      }

      a {
        line-height 60px !important;
        padding 0 30px !important;
        font-size 24px;
        margin-left 0 !important;
        margin-right 5px;

        i {
          display inline-block !important;
          margin-right 5px !important;
          font-size 24px;
        }
      }
    }

    .items-title {
      display block;
    }
  }

  @keyframes rotatefresh {
    from {
      color $color-light-grey;
    }
    to {
      color $color-danger;
    }
  }
</style>